<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="layout :: common_header(~{::title})">
    <title>淘宝店铺概览 - 电商ERP系统</title>
</head>

<body th:replace="layout :: common_body(~{::div.layui-body})">
    <div class="layui-body" style="padding:15px;">

        <style>
            .message-body {}

            .message-top {
                background: #fff;
                padding: 30px;
            }

            .message-body .content-title {

                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .message-body .content-title .label {
                font-weight: bold;
                font-size: 16px;
                color: #333;
            }

            .message-body .content-title span {
                font-size: 13px;
                color: #999;
                margin-left: 5px;
            }

            .message-body .order-list {
                display: flex;
                align-items: center;
                justify-content: space-around;
                background: #F2F2F2;
            }

            .message-body .order-item {
                width: 20%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 40px 0;
                margin: 10px;
                background: #fff;
            }

            .message-body .order-label {
                font-size: 14px;
                color: #999;
            }

            .message-body .order-num {
                margin-top: 20px;
                font-size: 20px;
                font-weight: bold;
            }

            .message-card-box {
                background: #fff;
                margin: 10px auto;
                padding: 60px 0;
            }

            .my-tab-brief {
                background: #fff;
                width: 90%;
                margin: 0 auto;
            }

            .my-tab-brief .layui-tab-title {
                background: #fff;
                display: flex;

            }

            .my-tab-brief .layui-tab-title li {
                border-right: 1px solid #e6e6e6;
                width: 20%;
                padding: 0;
                margin: 0;
            }

            .my-tab-brief .layui-tab-title span {
                color: #FF5722;
                margin-left: 5px;
                font-weight: bold;
            }

            .my-tab-brief .layui-tab-title li:last-child {
                border-right: none;
            }

            .my-tab-brief .layui-tab-title .layui-this {
                border-right: none;
                background: #009688;
                color: #fff;
            }

            .my-tab-brief .massgae-box {
                padding: 0 15px;
            }

            .my-tab-brief .message-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 0;
                line-height: 24px;
                color: #999;
            }

            .message-left {
                width: 80%;
                display: flex;
                align-items: center;
            }

            .message-left img {
                margin-right: 5px;
                width: 22px;
                height: 22px;
                object-fit: contain;
            }

            .message-right {
                color: #999;
            }
        </style>
        <div class="layui-tab layui-tab-brief " lay-filter="demo">
            <ul class="layui-tab-title">
                <li class="layui-this"><a th:href="@{/tao/dashboard(shopId=${shopId})}">首页</a></li>
                <li><a th:href="@{/tao/order_list(shopId=${shopId})}">订单管理</a></li>
                <!-- <li><a th:href="@{/tao/order_create(shopId=${shopId})}">手动创建订单</a></li> -->
                <li><a th:href="@{/tao/refund_list(shopId=${shopId})}">退货管理</a></li>
                <li><a th:href="@{/shop/goods_list(shopType=4,shopId=${shopId})}">商品管理</a></li>
                <li ><a th:href="@{/tao/goods_traffic_list(shopId=${shopId})}">商品流量管理</a></li>
                <li ><a th:href="@{/tao/goods_optimization_record(shopId=${shopId})}">商品优化记录</a></li>
            </ul>
        </div>
        <fieldset class="layui-elem-field message-body">
            <legend>
                <div>
                    <span class="label" th:text="${shop.name}"></span>
                </div>
            </legend>
            <div class="layui-field-box message-top">
                <div class="order-list">
                    <a class="order-item" th:href="@{/shop/order_list(shopId=${shopId},status=${waitSendOrderStatus})}">
                        <div class="order-label">待发货订单</div>
                        <div class="order-num" th:text="${report.waitSendOrder}" style="color: red">100</div>
                    </a>

                    <div class="order-item">
                        <div class="order-label">今日订单</div>
                        <div class="order-num" th:text="${report.todayOrder}" style="color: #018AED">100</div>
                    </div>
                    <div class="order-item">
                        <div class="order-label">今日有效订单</div>
                        <div class="order-num" th:text="${report.todayValidOrder}" style="color: #9F9F9F">100</div>
                    </div>
                    <div class="order-item">
                        <div class="order-label">今日成交金额</div>
                        <div class="order-num" th:text="${#numbers.formatDecimal(report.todayValidOrderAmout, 1, 2)}"
                            style="color: red">100</div>
                    </div>
                    <div class="order-item">
                        <div class="order-label">待处理退货</div>
                        <div class="order-num" th:text="${report.waitAuditReturn}" style="color: #28a605">100</div>
                    </div>
                </div>
            </div>

        </fieldset>
        <fieldset class="layui-elem-field ">
            <legend>功能导航</legend>
            <div class="layui-field-box ">
                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/shop/goods_traffic_tao(shopId=${shopId})}"><img src="/images/traffic.jpeg" width="25px" height="25px" />商品浏览明细</a>

                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/tao/order_list(shopId=${shopId})}">订单查询</a>
                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/tao/order_create(shopId=${shopId})}">手动创建订单</a>
                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/tao/order_excel_import_review(shopId=${shopId})}">excel导入订单</a>
                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/shop/goods_list(shopType=4,shopId=${shopId})}">商品管理</a>
                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/tao/refund_list(shopId=${shopId})}">退货管理</a>
                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/tao/goods_traffic_list(shopId=${shopId})}">商品流量管理</a>
                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/tao/goods_optimization_record(shopId=${shopId})}">商品优化记录</a>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field ">
            <legend>代办</legend>
            <div class="message-card-box">
                <div class="layui-tab layui-tab-card my-tab-brief">
                    <!-- <ul class="layui-tab-title">
                        <li class="layui-this">代办<span></span></li>
                        <li>订单信息<span></span></li>
                        <li>退款信息<span></span></li>
                        <li>发布新商品 <span></span></li>
                        <li>库存预警<span></span></li>
                    </ul> -->
                    <div class="layui-tab-content" style="min-height: 100px;">
                        <div class="layui-tab-item layui-show">
                            <div class="massgae-box">
                                <div class="message-item" th:each="item:${todoList}">
                                    <div class="message-left">
                                        <i th:if="${item.status == 1}"
                                            class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"
                                            title="处理中"></i>
                                        <i th:if="${item.status == 0}" class="layui-icon layui-icon-help"
                                            title="待处理"></i>

                                        <span th:text="${item.content}"
                                            style="padding-left: 5px;margin-left: 5px;"></span>
                                        <span style="color: red;padding-left: 20px;margin-left: 20px;"
                                            th:text="${item.result}"></span>
                                    </div>
                                    <div class="message-right">
                                        <span th:text="${item.updateTime}"></span>
                                    </div>
                                </div>

                            </div>



                        </div>
                        <div class="layui-tab-item">

                        </div>
                        <div class="layui-tab-item"></div>
                        <div class="layui-tab-item"></div>
                        <div class="layui-tab-item"></div>
                        <div class="layui-tab-item"></div>
                    </div>
                </div>

            </div>
        </fieldset>

        <h1 th:text="${msg}"></h1>


        <script type="text/javascript" src="/goods/Tips/Tips.min.js"></script>

        <script>
            $(function () {


            })
        </script>
    </div>
</body>

</html>